Soy nuevo en JS, así que he estado escribiendo código de la manera más simple posible solo para obtener la funcionalidad que quiero que el plan se limpie y acorte todo más tarde.
Parte de hacer esto es que tengo muchas clases para seleccionar una serie de elementos por su id. ¿Es posible ponerlos en una matriz? todos los elementos están numerados del 1 al 12
Básicamente, tengo tres elementos para obtener una diapositiva, el audio y los subtítulos que la acompañan.
const slide0 = document.getElementById("slide0"); const slide1 = document.getElementById("slide1"); const slide2 = document.getElementById("slide2"); const slide3 = document.getElementById("slide3"); const slide4 = document.getElementById("slide4"); const slide5 = document.getElementById("slide5"); const slide6 = document.getElementById("slide6"); const slide7 = document.getElementById("slide7"); const slide8 = document.getElementById("slide8"); const slide9 = document.getElementById("slide9"); const slide10 = document.getElementById("slide10"); const slide11 = document.getElementById("slide11"); const slide12 = document.getElementById("slide12"); const subt1 = document.getElementById("sub1"); const subt2 = document.getElementById("sub2"); const subt3 = document.getElementById("sub3"); const subt4 = document.getElementById("sub4"); const subt5 = document.getElementById("sub5"); const subt6 = document.getElementById("sub6"); const subt7 = document.getElementById("sub7"); const subt8 = document.getElementById("sub8"); const subt9 = document.getElementById("sub9"); const subt10 = document.getElementById("sub10"); const subt11 = document.getElementById("sub11"); const subt12 = document.getElementById("sub12"); const chp1 = document.getElementById("audiochp1"); const chp2 = document.getElementById("audiochp2"); const chp3 = document.getElementById("audiochp3"); const chp4 = document.getElementById("audiochp4"); const chp5 = document.getElementById("audiochp5"); const chp6 = document.getElementById("audiochp6"); const chp7 = document.getElementById("audiochp7"); const chp8 = document.getElementById("audiochp8"); const chp9 = document.getElementById("audiochp9"); const chp10 = document.getElementById("audiochp10"); const chp11 = document.getElementById("audiochp11"); const chp12 = document.getElementById("audiochp12");Sí tu puedes. Por ejemplo:
let slides = []; for (let i = 0; i < num_slides; i++) { slides.push({ slide: document.getElementById(`slide${i}`), subt: document.getElementById(`sub${i}`), chp: document.getElementById(`audiochp${i}`) }); } Sin embargo, también podría hacer algo similar dando clases a sus elementos y luego usando document.getElementsByClassName('slide') y así sucesivamente.
¡Seguramente! Le recomiendo encarecidamente que genere algunas funciones auxiliares para esto. Echa un vistazo al siguiente ejemplo:
function getSlides(theMaxSlideNumer) { const returnElements = []; for (int i = 0; i <= theMaxSlideNumber; i++) { const aSlideQuery = "#slide" + i.toString(); returnElements.push(document.querySelector(aSlideQuery)); } return returnElements; } const slides = getSlides(12); function getSlides(theMaxSlideNumer) { const returnElements = []; for (int i = 0; i <= theMaxSlideNumber; i++) { const aSlideQuery = "slide" + i.toString(); returnElements.push(document.querySelector(aSlideQuery)); } returnElements.forEach((aElement)=>{ if (aElement === null) console.warn("A dom element could not be found, trace this message!"); }); return returnElements; } const slides = getSlides(12);Apunte a ellos usando querySelectorAll y distribúyalos en una matriz.
[...document.querySelectorAll('[id^=slide]')] // CSS selector that captures all elements starting with slide wordRepita para cada grupo que tenga.